<!--
 * @Author: linZeJian
 * @Date: 2022-08-24 10:53:55
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-11-08 09:45:51
 * @Description: 
-->
<template>
  <div v-if="option.display">
    <uni-forms-item
      :label="option.label"
      :required="option.required"
      :rules="[{ required: option.required, errorMessage: '必填项不能为空' }]"
      :name="option.prop"
    >
      <uni-data-picker
        v-model="comValue"
        :placeholder="
          option.placeholder ? option.placeholder : '请选择' + option.label
        "
        :style="detailValue ? 'pointer-events: none;' : ''"
        :disabled="detailValue"
        popup-title="请选择所在地区"
        :localdata="dataTree"
        :map="{ text: 'name', value: 'code' }"
        @change="onchange"
        @nodeclick="onnodeclick"
        @popupopened="onpopupopened"
        @popupclosed="onpopupclosed"
      >
      </uni-data-picker>
    </uni-forms-item>
  </div>
</template>

<script>
import cityChina from "../utils/city-china.json";
export default {
  name: "auni-city-picker",
  props: {
    option: Object,
    value: [String, Number],
  },
  data() {
    return {
      // classes: "",
      dataTree: this.jsonFormatTree(cityChina),
      // dataTree: [{
      // 		text: "一年级",
      // 		value: "1-0",
      // 		children: [{
      // 			text: "1.1班",
      // 			value: "1-1"
      // 		},
      // 		{
      // 			text: "1.2班",
      // 			value: "1-2"
      // 		}]
      // 	},
      // 	{
      // 		text: "二年级",
      // 		value: "2-0",
      // 		children: [{
      // 			text: "2.1班",
      // 			value: "2-1"
      // 		},
      // 		{
      // 			text: "2.2班",
      // 			value: "2-2"
      // 		}]
      // 	},
      // 	{
      // 		text: "三年级",
      // 		value: "3-0",
      // 		disable: true
      // 	}]
    };
  },
  computed: {
    comValue: {
      get() {
        // console.log("this.option :>> ", this.option);
        return this.value;
      },
      set(val) {
        // 触发value绑定值的交互与更新
        this.$emit("input", val);
      },
    },
    // 处理详情模式
    detailValue() {
      if (this.option.detail) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {
    // console.log(
    //   "this.format(this.dataTree)",
    //   this.jsonFormatTree(this.dataTree)
    // );
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(newV) {},
    },
  },
  methods: {
    /**
     * @description: JS实现 JSON扁平数据转换树状数据
     * @param {*} jsonData
     * @return {*}
     */
    jsonFormatTree(jsonData) {
      var result = [],
        temp = {},
        i = 0,
        j = 0,
        len = jsonData.length;
      for (; i < len; i++) {
        temp[jsonData[i]["code"]] = jsonData[i]; // 以id作为索引存储元素，可以无需遍历直接定位元素
      }
      for (; j < len; j++) {
        var currentElement = jsonData[j];
        var tempCurrentElementParent = temp[currentElement["parent_code"]]; // 临时变量里面的当前元素的父元素 parentId 父级ID
        if (tempCurrentElementParent) {
          // 如果存在父元素
          if (!tempCurrentElementParent["children"]) {
            // 如果父元素没有chindren键
            tempCurrentElementParent["children"] = []; // 设上父元素的children键
          }
          tempCurrentElementParent["children"].push(currentElement); // 给父元素加上当前元素作为子元素
        } else {
          // 不存在父元素，意味着当前元素是一级元素
          result.push(currentElement);
        }
      }

      return result;
    },
    onnodeclick(e) {
      console.log(e);
    },
    onpopupopened(e) {
      console.log("popupopened");
    },
    onpopupclosed(e) {
      console.log("popupclosed");
    },
    onchange(e) {
      console.log("onchange:", e);
    },
  },
};
</script>

<style></style>
